<template>
  <div class="">
    <!-- 搜索 -->
    <!--    <SearchBlock ref="searchBlockRef" @clickQuery="clickQuery"/>-->
    <hz-table ref="tableRef" :columnSelection='false' :tableConfig="tableConfig" @pageChange="clickQuery">
      <template #action="{ column, record, text, index }">
                <el-button type="primary" size="small" link @click="open(record,true)"  v-if="record.states=='受理中'" >审核</el-button>
        <el-button type="primary" size="small" link @click="open(record,false)" >查看详情</el-button>
      </template>
    </hz-table>

    <!-- 详情 -->
    <el-dialog v-model="salesParams.show" title="导出订单数据">
      <div style="margin-top: 30px;font-size: 20px;color: black">
        <el-space direction="vertical" alignment="normal" size="large">
          <el-space >
            <div class="label">订单编号:</div>
            <div class="">{{salesParams.orderDetail.afterSalesId}}</div>
          </el-space>
          <el-space >
            <div class="label">用户名:</div>
            <div class="">{{salesParams.orderDetail.nickName}}</div>
          </el-space>
          <el-space >
            <div class="label">店铺名:</div>
            <div class="">{{salesParams.orderDetail.storeName}}</div>
          </el-space>
          <el-space >
            <div class="label">菜品名:</div>
            <div class="">{{salesParams.orderDetail.foodName}}</div>
          </el-space>
          <el-space >
            <div class="label">售后类型:</div>
            <div class="">{{salesParams.orderDetail.afterSaleItemTitle}}</div>
          </el-space>
          <el-space >
            <div class="label">售后金额:</div>
            <div class="">{{salesParams.orderDetail.valuea}}</div>
          </el-space>
          <el-space >
            <div class="label">相关图片:</div>
<!--            <div class="label">有脏东西</div>-->
            <img :src="item" style="width: 100px" v-for="item in JSON.parse(salesParams.orderDetail.images)" :key="item">
          </el-space>
          <el-space >
            <div class="label">售后处理结论:</div>
            <el-radio-group v-model="salesParams.state.state" class="ml-4" v-if="salesParams.flag">
              <el-radio value="已通过" size="large">通过</el-radio>
              <el-radio value="已驳回" size="large">驳回</el-radio>
            </el-radio-group>
            <view v-else>{{salesParams.state.state}}</view>
            <!--            <div class="label">有脏东西</div>-->
          </el-space>
          <el-space >
            <div class="label">售后处理备注:</div>
            <el-input
                v-model="salesParams.state.comments"
                style="width: 240px"
                :rows="6"
                type="textarea"
                v-if="salesParams.flag"
            />
            <view v-else>{{salesParams.state.comments}}</view>
            <!--            <div class="label">有脏东西</div>-->
          </el-space>
        </el-space>

      </div>
      <template #footer>

        <div class="dialog-footer">
          <el-button @click="downParams.show = false">取消</el-button>
          <el-button type="primary" @click="dealogOk">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {ref, onMounted, reactive, computed, getCurrentInstance} from "vue";
import {useStore} from "vuex";
import {ElMessage} from "element-plus";
import  {states} from "@/views/order/config";

const {proxy} = getCurrentInstance();
const {moment} = proxy.$util
const store = useStore();
const tableRef = ref(null);


const tableConfig = reactive({
  columns: [
    {label: "菜品名", prop: "foodName", 'width': 180, showTooltip: false},
    {label: "用户名", prop: "nickName", 'width': 180, showTooltip: false},
    {label: "手机号", prop: "phone", 'width': 180, showTooltip: false},
    {label: "站点", prop: "siteName", 'width': 180, showTooltip: false},
    {label: "店铺", prop: "storeName", 'width': 180, showTooltip: true},
    {label: "售后状态", prop: "states", 'width': 180, showTooltip: false},
    // {label: "取餐编号", prop: "pickUpCode", 'width': 180, showTooltip: false},
    {label: "售后申请时间", prop: "createTime", 'width': 180, showTooltip: false},
    { label: "操作", prop: "action", width: 150, scopeVal: true, },
  ],
  dataSource: [],
  pageNo: 1,
  pageSize: 10,
  total: 0,
});
const dialog = reactive({
  show: false,
})
const formConfig = reactive({
  dataObj: {},
  type: 'add',
  dialog: dialog,
  okCallback: clickQuery,
})

onMounted(() => {
  clickQuery();
})

// 点击查询
function clickQuery(data) {
  //  if (!data) {
  //   searchBlockRef.value.clickQuery();
  //   return;
  // }
  let {pageSize, pageNo, total} = tableConfig
  let param = {pageSize, pageNo};

  proxy.$http.post('/jx/jxOrderManage/queryAfterSalesList', param).then(res => {
    if (res.code == 200) {
      console.log(res, '123')
      tableConfig.dataSource = Array.isArray(res.result.orders) ? res.result.orders : [];
      tableConfig.total = res.result.totalCount
    } else {
    }
  })
}

const salesParams = reactive({
  orderDetail: {},
  state:{
    afterSaleId:'',
    state:'已通过', //受理中，已通过，已驳回
    comments:''
  },
  show: false,
  flag: false
})

const open = (record,flag) => {
  salesParams.orderDetail = record;
  salesParams.state.afterSaleId = record.afterSalesId;
  salesParams.state.state = record.states;
  salesParams.state.comments = record.comments;
  salesParams.show = true;
  salesParams.flag = flag;
}

const dealogOk = () => {
  if(salesParams.flag){
    if(!salesParams.state.comments){
      ElMessage.error('请填写备注')
      return
    }
    proxy.$http.put('/jx/jxOrderManage/handleAfterSale', salesParams.state).then(res => {
      if (res.code === 200) {
        ElMessage.success('操作成功')
        clickQuery()
        salesParams.show = false
      } else {
        ElMessage.error(res.message)
      }
    })
  }else{
    salesParams.show = false

  }
}

</script>
<style lang="scss" scoped>
.label{
  width: 150px;
  text-align: right;
}

</style>
